<template>
  <div>
    <div class="main">
      <div class="search">
        <i class="toutiao toutiao-sousuo"></i>
        <span>搜索</span>
      </div>
    </div>
    <!-- around类名控制1个或0个图片，三个图片不要类名 -->
    <van-tabs @click="getNews($event)">
      <van-tab v-for="item in channelList" :title="item.name" :key="item.id">
        <channel :item="item"></channel>
      </van-tab>
      <div class="gengduo" @click="$router.push('/setchannel')">
        <i class="toutiao toutiao-gengduo"></i>
      </div>
    </van-tabs>
  </div>
</template>

<script>
import { requestnews } from "@/api";
import { mapActions } from "vuex";
import channel from '@/components/art_list'
export default {
  name:'Home',
  components:{
    channel
  },
  data() {
    return {
      id:0,//渠道id
      channelList: [], //渠道列表
    };
  },
  async created() {
    // 判断当前是否登录，token
    await this.allChannel();
    await this.userChannel();
    const { user, channel } = this.$store.state;
    this.channelList = user.tokens ? channel.userChannel : channel.allChannel;
  },
  methods: {
    ...mapActions(["allChannel", "userChannel"]),
    // 获取新闻列表
    async getNews(id) {
      // 发送请求获取当前渠道的新闻
      const res = await requestnews({
        channel_id: id,
        timestamp:this.timestamp || new Date().getTime(),
      });
      console.log(res)
      
      this.news = res.data.results
    },
    // 触底触发
    // async onLoad(id) {
    //   console.log(1)
    //   // 1.利用分页参数等调用接口获取列表数据
    //   const res = await requestnews({
    //     channel_id: id,
    //     timestamp: this.timestamp || new Date().getTime(),
    //   }); 
    //   // 添加到数组尾部
    //   this.news.push(...res.data.results)
    //   // 判断是否还有下一页
    //   console.log(res)
    //   if(res.data.results.length===0){
    //     // 如果没有下一页的数据就把finished设置为true--表示所有数据加载完毕
    //     this.finished=true
    //   }else{
    //     // 否则还有下一页的数据，就修改分页参数，在下一次掉接口的时候获取下一页数据
    //     this.timestamp = res.data.pre_timestamp
    //   }
    // },
    }
};
</script>

<style lang="less" scoped>
/deep/ .van-tabs__wrap {
  position: fixed;
  top: 88px;
  z-index: 1;
  width: 100%;
}
.main {
  background-color: #3296fa;
  opacity: 0.9;
  overflow: hidden;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1;
  .search {
    width: 555px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 32px;
    height: 64px;
    margin: 12px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    .toutiao-sousuo {
      font-size: 40px;
      color: #fff;
      display: block;
      position: relative;
    }
    span {
      margin-left: 8px;
      font-size: 32px;
      color: #fff;
    }
  }
}
img {
    width: 232px;
    height: 146px;
  }
  .item {
    padding: 25px 23px 31px;
    background-color: #fff;
    border: 1px solid #edeff3;
    .left {
      font-size: 32px;
      margin-bottom: 29px;
      color: #3a3a3a;
    }
    .right {
      display: flex;
    }
    .footer {
      display: flex;
      font-size: 23px;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 31px;
      color: #b4b4b4;
      .footleft {
        width: 430px;
        display: flex;
        text-align: center;
        line-height: 22px;
        justify-content: space-between;
        .up {
          color: red;
        }
      }
      i {
        font-size: 26px;
      }
    }
    .around {
      display: flex;
      justify-content: space-between;
    }
  }
  .van-tabs {
    margin-bottom: 100px;
  }
  .gengduo {
    position: absolute;
    right: 0px;
    top: 12px;
    width: 66px;
    height: 58px;
    text-align: center;
    line-height: 58px;
    border-left: 1px solid #c8c8c8;
    background-color: rgba(255, 255, 255, 0.9);
  }
  /deep/ .van-tabs {
    .van-tab {
      border-right: 1px solid #edeff3;
      min-width: 200px;
      height: 80px;
      .van-tab__text {
        font-size: 27px;
        color: #777777;
      }
    }
  
    .van-tab--active .van-tab__text {
      color: #333 !important;
    }
    .van-tabs__line {
      width: 31px !important;
      height: 6px;
      background: rgba(50, 150, 250, 1);
      border-radius: 3px;
      bottom: 8px;
    }
    .van-tabs__nav {
      padding: 0;
    }
  }
</style>
